<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
    <style type="text/css">
        body, html {
            width: 100%;
            height: 100%;
            overflow: hidden;
            margin: 0;
        }
        #allmap{
            width: 100%;
            height: 600px;
            position: relative;
        }
        .anchorBL a img{display: none}
        .BMap_noprint span span{display: none !important;}
        #show-result{width: 300px;position: absolute;right: 100px;top: 300px;
            /*height: 300px;*/
        }
        #show-result table{width: 100%;height: 100%;background-color: #BFEFFF;position: relative}
        table tr{position: relative}
        table tr td{display: block;width: 100%;}
        table tr td:first-child{background-color: #00D685;height: 30%;}
        table tr td:last-child{background-color: red;height: 70%;}
        .BMap_bubble_title{color: #4890D7;display: inline}
        .BMap_bubble_content{color: #4890D7;display: inline}
        ul{margin: 0px;padding: 0px}
        ul li{list-style: none}
    </style>
    <script src="jquery-1.7.2.min.js"></script>
    <script src="http://api.map.baidu.com/api?v=2.0&ak=ZpeN7GsQtGHMWTiPMvGdSQm6vfA6cm25"></script>
    <title>地图展示</title>
</head>
<body>
<div id="allmap"></div>
<div id="show-result">
    <table cellspacing="10">
        <tr>
            <td>师大新区</td>
            <td>
                <ul>
                    <li>电话：13315955589 15130165523</li>
                    <li>地址：师大新校区科技园写字楼A座909室</li>
                </ul>
            </td>
        </tr>
        <tr>
            <td>科大新区</td>
            <td>
                <ul>
                    <li>电话：13315955589</li>
                    <li>地址：1.科大西楼正对面四楼领航考研办公楼
                    2.公教楼D座负一层创业园017室</li>
                </ul>
            </td>
        </tr>
        <tr>
            <td>河北地质大学</td>
            <td>
                <ul>
                    <li>电话：13315955589</li>
                    <li>地址：地大南院综合楼20楼2017室</li>
                </ul>
            </td>
        </tr>

    </table>
</div>
<script type="text/javascript">
    $(document).ready(function () {
        var map = new BMap.Map("allmap");
        var point = new BMap.Point(114.528729,37.983946);
        map.centerAndZoom(point, 14);
        var data_info = [
            { "x":114.528729 , "y":37.983946,"local":"科大新区" },
            { "x":114.520656 , "y":38.002373,"local":"师大新区" },
            { "x":114.553856 , "y":38.027376,"local":"河北地质大学" }
        ];
        var opts = {
            width : 250,     // 信息窗口宽度
            height: 80,     // 信息窗口高度
            title : "领航考研" , // 信息窗口标题
        };
        for(var i=0;i<data_info.length;i++){
            var marker = new BMap.Marker(new BMap.Point(data_info[i].x,data_info[i].y));  // 创建标注
            var content = "————"+data_info[i].local;
            map.addOverlay(marker); // 将标注添加到地图中
            addClickHandler(content,marker);
        }
        function addClickHandler(content,marker){
            marker.addEventListener("click",function(e){
                openInfo(content,e)}
            );
        }
        function openInfo(content,e){
            var p = e.target;
            var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
            var infoWindow = new BMap.InfoWindow(content,opts);  // 创建信息窗口对象
            map.openInfoWindow(infoWindow,point); //开启信息窗口
        }
        map.setCurrentCity("石家庄");// 设置地图显示的城市 此项是必须设置的
        map.enableScrollWheelZoom(true);//开启鼠标滚轮缩放
        $("table tr").each(function(){
            var tr = $(this);
            tr.click(function () {
                var tds = tr.find("td");
                tds.each(function(){
                    var td = $(this);//alert(td.text());
                    for(var i=0;i<data_info.length;i++){
                        if(td.text() === data_info[i].local){//alert(data_info[i].x)
                            map.centerAndZoom(new BMap.Point(data_info[i].x, data_info[i].y), 15);// 初始化地图,设置中心点坐标和地图级别
                            var content = "————"+data_info[i].local;
                            var infoWindow = new BMap.InfoWindow(content,opts);//创建信息窗口对象
                            var newPoint = new BMap.Point(data_info[i].x, data_info[i].y);
                            map.openInfoWindow(infoWindow,newPoint);//开启信息窗口
                        }
                    }
                })
            })
        });
    })

</script>
</body>
</html>

